<template>
  <div style="background-color: #f2f7ff">
  <div style="height: 100%;width: 100%">
    <div style="width: 100%;margin-top: 5px;">
      <div>上传攻略图片，第一张默认为封面图片</div>

      <el-upload
          action="http://localhost:9080/file/create"
          :on-success="fileok"
          :on-preview="handlePreview"
          :on-remove="handleRemove"


          list-type="picture-card"
          :show-file-list="true"
      >
        <i class="el-icon-upload2"></i>
        <div slot="tip" class="el-upload__tip">
        </div>
      </el-upload>


      <el-dialog :visible.sync="dialogVisible">
        <img width="100%" v-if="urlList[0]" :src="urlList[1]" alt="">
      </el-dialog>
    </div>
    <el-input style="margin-top: 10px;width: 65%" v-model="send.title" placeholder="填写标题，可能会有更多赞哦"
              maxlength="20"
              show-word-limit></el-input>
    <el-input placeholder="旅游地点" v-model="send.place" style="width: 33%;margin-left: 26px" maxlength="20"
              show-word-limit></el-input>
    <br>
    <el-input type="textarea" style="margin-top: 10px" v-model="send.content" placeholder="填写内容,让更多人看到你吧"
              maxlength="500" show-word-limit :rows="5"></el-input>
    <br>
    <el-button style="margin-top: 10px" type="mini" @click="addht">#话题</el-button>
    <br>
    <el-button style="margin-top: 10px;margin-right: 20px;margin-left: 1195px" type="success" @click="submit">发布
    </el-button>
    <el-button type="info">清空</el-button>
  </div>
  </div>
</template>

<script>
import Qs from "qs";

export default {
  data() {
    return {
      fileList: [{url:null}],
      dialogVisible: false,
      urlList: [],
      send: {
        userid: '1',
        urlList:[],
        title: '',
        content: '',
        place: ''
      }
    };
  },
  created() {

  },
  methods: {
    submit() {
      this.send.urlList=this.urlList.join(',')
      console.log(this.urlList.join(','))
      this.$axios.post("http://localhost:9080/strategy/submit", Qs.stringify(this.send)).then(res => res.data).then(res => {
        if (res == true) {
          this.$message.success("创作成功")
        } else {
          this.$message.error("创作失败")
        }
      })
    },
    fileok(res) {
      this.urlList.push(res.data)
      console.log(this.urlList)
      // this.fileList.push(require(res.url))
      // console.log(this.fileList)
      // console.log(res.data)
      this.$message.success("图片上传成功");
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    addht() {
      this.content += "#"
      console.log(this.fileList)
    }
  }
}
</script>

<style scoped>

</style>